<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3 3D 行星运转</title>
  <meta content="CSS3 3D,CSS3行星动画,3D动画,3D行星运转,preserve-3d,CSS3动画,Web动画,CSS3太阳系" name="Keywords">
  <meta content="css3 3d 行星运转动画，实现简单的太阳系旋转" name="description">


    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/solarSystemStyle.css" />
</head>
<body>
  <div class="container">
    <!-- <a style="width:149px;height:149px;position:fixed;top:0;right:0;z-index:9999;" href="https://github.com/chokcoco/css3-" target="_blank">
      <img src="http://chokcoco.github.io/demo/curveJS/images/forkme.png">
    </a> -->
    <!-- 3d照片墙 -->
    <div class="demo-perspective-photo">
      <div id="contentContainer">
        <div id="carouselContainer">
          <figure class="mod-sun">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example1'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example2'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example3'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example4'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example5'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example6'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class="circle circle1"></figure>
          <figure class="circle circle2"></figure>
          <figure class="circle circle3"></figure>
          <figure class="circle circle4"></figure>
          <figure class="circle circle5"></figure>
          <figure class="circle circle6"></figure>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="http://cdnjs.gtimg.com/cdnjs/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="../js/TweenMax.min.js"></script>
  <script type="text/javascript" src="../js/solarSystem.js"></script>
  <script type="text/javascript">
    $('.demo-perspective-photo,#contentContainer').css('height',$(window).height());
  </script>
</html>
